<template>
	<view>
		<view class="profile-header">
			<view class="avatar-url">
				<image src="../../static/login.jpg" mode="" class="userImg"></image>
			</view>
			<span type="userNickName" class="nickname">{{userName}}</span>
		</view>
		<view class="nav">
			<view class="nav-item" @click="gotoUserInfo">
				<view class="content">
					<u-icon name="account" class="icon-info" size="50"></u-icon>
					<span class="text">个人信息</span>
					<u-icon name="arrow-right" class="icon-arr-right" size="30"></u-icon>
				</view>
			</view>
			<view class="nav-item" @click="gotouserImg">
				<view class="content">
					<u-icon name="info" class="icon-info" size="50"></u-icon>
					<span class="text">关于我们</span>
					<u-icon name="arrow-right" class="icon-arr-right" size="30"></u-icon>
				</view>
			</view>
			<!-- <view class="nav-item">
				<view class="content">
					<u-icon name="setting" class="icon-info" size="50"></u-icon>
					<span class="text">设置</span>
					<u-icon name="arrow-right" class="icon-arr-right" size="30"></u-icon>
				</view>
			</view> -->
			<u-modal v-model="show" :mask-close-able="true" title="请确认登录" content="只有登录后,才能有其他操作哦!" @confirm="affirm()"
			 show-cancel-button="true"></u-modal>
		</view>
		<view class="u_login" @click="login">{{loginstr}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queren: false,
				show: false,
				userName: '',
				//判断缓存的布尔值
				decide: false,
				loginstr: ""
			}
		},
		components: {

		},
		onLoad() {
			var cache = uni.getStorageSync('USER_INFO')
			console.log(cache)
			if (cache) {
				console.log("已经存在缓存")
				this.decide = true
				this.userName = cache.Name
				this.loginstr = "退出登录"
			} else {
				this.userName = "未登录"
				console.log("没有拿到缓存,需要登录")
				this.decide = false
				this.loginstr = "请点击登录"
			}
		},
		methods: {
			gotoUserInfo() {
				uni.navigateTo({
					url: '../userInfo/userInfo'
				});
			},
			gotouserImg() {
				uni.navigateTo({
					url: '../userimg/userimg'
				})
			},
			login() {
				var det = this.decide
				console.log(det)
				if (det != true) {
					this.show = true
				} else {
					uni.removeStorageSync('USER_INFO');
					uni.reLaunch({
						url: '../login/login'
					})
				}
			},
			affirm() {
				uni.reLaunch({
					url: '../login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	$body-bg-color: #f1f1f1;
	$header-bg-color: #41A4FF;
	$header-height: 380rpx;
	$header-font-color: #fff;

	page {
		background-color: $body-bg-color;
	}

	.profile-header {
		background-color: $header-bg-color;
		background-size: cover;
		height: $header-height;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: $header-font-color;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.avatar-url {
		width: 200rpx;
		height: 200rpx;
		display: block;
		overflow: hidden;
		border: 6rpx solid #fff;
		border-radius: 50%;

		.userImg {
			width: 100%;
			height: 100%;
		}
	}

	.nickname {
		font-size: 15px;
		margin-top: 20rpx;
	}

	.nav {
		overflow: hidden;
		margin: 30rpx 30rpx 150rpx 30rpx;
		text-align: center;
		border-radius: 35rpx;
		background-color: white;
	}

	.nav-item {
		line-height: 150rpx;
		border: 1px solid #E8E8E8;
	}

	.content {
		position: relative;
		text-align: left;
		padding-left: 100rpx;
		color: #696969;
	}

	.icon-info {
		position: absolute;
		top: 52rpx;
		left: 30rpx;
		color: #41A4FF;
		font-size: 40rpx;
		font-weight: 600;
	}

	.icon-arr-right {
		position: absolute;
		right: 60rpx;
		top: 58rpx;
		color: #ccc;
	}

	.u_login {
		margin: auto;
		height: 88rpx;
		width: 600rpx;
		border-radius: 50rpx;
		background-color: rgb(85, 170, 255);
		text-align: center;
		line-height: 88rpx;
		color: white;
		box-shadow: 0rpx 5rpx 10rpx #a2a2a2;
	}
</style>
